<template>
  <div class="cards-container">
    <router-link tag="div" to="/Sub/AddCard" class="add-card-wrapper">
      <div class="icon">
        <i class="fa-plus-circle fa-lg fa"></i>
      </div>
      <div class="title">Add bank cards</div>
      <div class="link">
        <i class="fa-angle-right fa-lg fa"></i>
      </div>
    </router-link>

    <div class="card-list-wrapper">
      <ul class="flex-center column">
        <li
          v-for="(item, i) of cardList"
          :key="i"
          class="card elevation-2"
          @click="onCardClicked(item)"
        >
          <div class="name">{{ item.bankName }}</div>
          <div class="account">{{ item.cardNumber }}</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Api } from "@/api";
import Cookie from "js-cookie";

@Component({
  components: {}
})
export default class Cards extends Vue {
  private cardList: Array<any> = [
    // {
    //   name: "Alipay",
    //   account: "48ug934@hotmail.com"
    // },
    // {
    //   name: "Apple pay",
    //   account: "48ug934@hotmail.com"
    // },
    // {
    //   name: "WeChat Pay",
    //   account: "48ug934@hotmail.com"
    // },
    // {
    //   name: "Paypal",
    //   account: "48ug934@hotmail.com"
    // }
  ];

  protected mounted() {
    this.getCreditCardList();
  }

  private onCardClicked(item: any) {
    this.$createToast({
      txt: "Correct",
      type: "correct",
      time: 3000,
    }).show();
  }

  /**
   * 获取银行卡列表
   */
  private async getCreditCardList() {
    const params: any = {
      userId: Cookie.get("buyer_userId"),
      limit: 1000,
      offset: 0,
    };
    const { data } = await Api.getCreditCardList.r(params);
    console.log("getCreditCardList", data);
    if (data.result === 0) {
      this.cardList = data.data.dataList;
    } else {
      this.$createToast({
        txt: "Something has gone wrong.",
        type: "warn",
        time: 3000
      }).show();
    }
  }
}
</script>

<style lang="less" scoped>
.cards-container {
  display: flex;
  flex-direction: column;
  padding: 0.4rem 1rem;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  .add-card-wrapper {
    height: 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #dcdcdc;
    .title {
      font-size: 1.2rem;
      color: black;
      flex-basis: 70%;
      width: 70%;
    }
    .icon {
      color: rgb(14, 147, 224);
    }
  }

  .card-list-wrapper {
    width: 100%;
    ul {
      width: 100%;
      li {
        width: 88%;
        height: 3rem;
        margin-bottom: 0.4rem;
        padding: 1rem 0.8rem;
        .account {
          margin-top: 1rem;
        }
      }
    }
  }
}
</style>
